<template>
  <div class="login">
      <!-- 标题开始 -->
      <div class="title">易洁家政</div>
      <!-- 标题结束 -->
      <!-- 登录框开始 -->
      <div class="loginForm">
          <div class="form">
              <!-- {{form}} -->
              <van-form @submit="onSubmit">
                <van-field
                    v-model="form.username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="form.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
                </div>
                </van-form>
          </div>
      </div>
      <!-- 登录框结束 -->
  </div>
</template>

<script>
import {post_json} from '@/http/axios'
export default {
    data() {
        return {
            form: {
                username:'admin1',
                password:'123321',
            }
        }
    },
    methods:{
        onSubmit(){
            //异步操作
            post_json('user/login',this.form).then((res)=>{
                if(res.data.status ==200){
                    //将token存储起来
                    localStorage.setItem('token',res.data.data.token);
                    //跳转页面，跳转到首页
                    this.$router.push({ path:'/manager/home'})
                }
            })
        }
    }
}
</script>

<style scoped>
.login {
    height:100%;
    background-image: linear-gradient(#5098fa,#265aca);
}
.login .title{
    position: relative;
    top:120px;
    color: #fff;
    font-size:36px;
}
.login .loginForm{
    padding:1em;
    position: relative;
    top:180px;
}
.login .loginForm .form{
    background-Color:#fff;
    height:300px;
    border-radius: 5px;
    padding-top: 50px;
}
</style>